<!DOCTYPE html>
<html lang="en" style="font-size:24px;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!--  <script
            src="http://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script> -->
</head>
<style>
    body,body *{
        font-weight: 600;
        font-family: '微软雅黑';
        /*line-height: 10px;*/
    }
    .paging{
        width: 998px;
        height: 1000px;
  /*      border: solid 1px red;*/
        position: relative;
        box-sizing: content-box;
        overflow: hidden;
    }
    .cont_box{
        position: absolute;
        z-index: 10;
        background: #fff;
        word-wrap:break-word;
        overflow-y: hidden;
        font-size: 1rem;
    }
    body{
        width: 1000px;
        height: 1000px;
        padding: 0;
        overflow: hidden;
        margin: auto;
    }
</style>
<body>
<div>mysvg+++<div/>
<script>
    var data = 'svgData+++';

    var appendHtml = [];
    function getValByVar(varName) {
        return data[varName]||'';
    }
    function replaceCustomname(el) {
        var varName = el.getAttribute('customname')||false;
        var config =el.getAttribute('config')||false;console.log(config);
        var ex = 2;
        if(varName || varName !== '0' || varName !== '') {
            if(typeof(config) === 'string'){
                var configArr = config.split('|');
                var cfg = {};
                for(var j in configArr){
                    var tmpConfigVar = (configArr[j]+'=').split('=');
                    // console.log(tmpConfigVar);
                    // console.log('$$$$$$$$$$$$');
                    var tmpKey = tmpConfigVar[0];
                    cfg[tmpKey] = tmpConfigVar[1];
                }
            }
            var arr = varName.split('-');
            var val = '';
            for(var i in arr){
                var tmpValue = arr[i].match(/^\[(.*?)\](.+?)\s*$/);
                if(tmpValue == null ||  tmpValue.length <2){
                    val += getValByVar(arr[i]);
                }else{
                    tmpValue[1] = tmpValue[1].replace(/\\n/g,'<br/>');
                    var res = getValByVar(tmpValue[2]);
                    if(res != ''){
                      val += tmpValue[1]+getValByVar(tmpValue[2]);
                    }
                    
                }
            }
            return _replaceCustomname(val,el,ex,cfg);
        }
        return '';
    }

    function _replaceCustomname(val,el,ex,cfg){
        var x = el.getAttribute('x') || 0;
            x = x>=ex? (x-ex):x;
        var y = el.getAttribute('y') || 0;
            y = y>=ex? (y-ex):y;
        console.log(cfg);
        var w = (el.getAttribute('width') || 8)*1 +(ex*2);
        var h = (el.getAttribute('height') || 40)*1 +(ex*2);
        var tmp = [];
        var style = '';
        for(var i in cfg){
            cfg[i] = cfg[i].replace(/"/g,"&quot;");
            if(i!='style'){
                tmp.push(i+'="'+cfg[i]+'"');    
            }else{
                style = cfg[i];
            }
        }
        if(style != ''){
            style = style.replace(/;\s*$/,'')+';';
        }

        return '<div class="cont_box" '+tmp.join(' ')+' style="'+style+'top:' + y + 'px;left:' + x + 'px;height:' + h + 'px; width:' + w + 'px;">' + val + '</div>'
    }


    function setData(p){
        var tmpPaging = document.querySelectorAll(".paging.p"+p+" rect[customname]");
        if(tmpPaging && tmpPaging.length>0){
            var appendHtml = [];
            for(var i=0;i<tmpPaging.length;i++){
                // replaceCustomname(tmpPaging[i]);

                appendHtml.push(replaceCustomname(tmpPaging[i]));
            } 
            if(appendHtml.length>0){

                var node = document.querySelector(".paging.p"+p);
                node.innerHTML = node.innerHTML+appendHtml.join('');


            }
        }
    }
    
    setData(1);
    setData(2);
    setData(3);
    // for(var i in tmpPaging){
    //     var appendHtml = [];
    //     var tmpCustomname = document.querySelectorAll('rect[customname]');
        
    //     for(var j in tmpCustomname){
    //         console.log(tmpCustomname[j]);
    //         // appendHtml.push(replaceCustomname(tmpCustomname[j]));
    //     }
    //     // tmpPaging[i].append(appendHtml.join(''));  
    //     break;
    // }
    // $('.paging').each(function () {console.log($('.paging'));
    //     var appendHtml = [];
    //     $(this).find('rect[customname]').each(function () {
            
    //         // appendHtml.push(replaceCustomname($(this)));
    //     });
    //     // $(this).append(appendHtml.join(''));    
    // });
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f811c4171ff39752d6e5789e29fc1fd3";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>